<template>
  <el-card shadow="never">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row :gutter="15">
        <el-col :sm="8">
          <el-form-item label="类型:" prop="type">
            <el-radio-group v-model="form.type" clearable>
              <el-radio :label="1" value="1">充值</el-radio>
              <el-radio :label="2" value="2">扣除</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :sm="12">
          <el-form-item label="当前点数:">
            <span>{{ data.balance }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="15">
        <el-col :sm="6">
          <el-form-item label="操作点数:" prop="point">
            <el-input
              type="number"
              step="0.01"
              v-model="form.point"
              label="点数"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :sm="5">
          <el-form-item label="描述:" prop="point">
            <el-input
              type="text"
              v-model="form.desc"
              label="描述"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-button type="primary" :loading="loading" @click="save"
          >确认</el-button
        >
      </el-row>
    </el-form>

    <el-card :bordered="false" dis-hover class="ivu-mt" :header="'点数记录'">
      <index-data :account_id="this.data.id" />
      <!-- 数据表格 -->
      <log-search @search="reload" />
      <ele-pro-table ref="table" :datasource="datasource" :columns="columns">
        <template v-slot:account="{ row }">
          <div class="ele-cell-content">
            <div class="ele-cell-title">{{ row.figureAccount.name }} </div>
            <div class="ele-cell-title">{{ row.figureAccount.telphone }} </div>
          </div>
        </template>

        <template v-slot:point="{ row }">
          <el-tag v-if="row.type == 1" type="success">+{{ row.point }}</el-tag>
          <el-tag v-if="row.type == 2" type="danger">-{{ row.point }}</el-tag>
        </template>

        <template v-slot:way="{ row }">
          <el-tag v-if="row.way == 0" type="info" effect="light"
            >后台操作</el-tag
          >
          <el-tag v-if="row.way == 1" type="success" effect="light"
            >点数充值</el-tag
          >
          <el-tag v-if="row.way == 2" type="warning" effect="light"
            >声音克隆入门版</el-tag
          >
          <el-tag v-if="row.way == 3" type="warning" effect="light"
            >声音克隆高保真</el-tag
          >
          <el-tag v-if="row.way == 4" type="primary" effect="light"
            >形象克隆线路三</el-tag
          >
          <el-tag v-if="row.way == 5" type="success" effect="light"
            >视频换脸</el-tag
          >
          <el-tag v-if="row.way == 6" type="danger" effect="light"
            >视频合成高级版</el-tag
          >
          <el-tag v-if="row.way == 7" type="primary" effect="light"
            >形象克隆高级版</el-tag
          >
          <el-tag v-if="row.way == 8" type="warning" effect="light"
            >声音克隆高保真合成</el-tag
          >
          <el-tag v-if="row.way == 9" type="danger" effect="light"
            >视频合成线路三</el-tag
          >
          <el-tag v-if="row.way == 10" type="danger" effect="light"
            >ai文案创作</el-tag
          >
          <el-tag v-if="row.way == 11" type="danger" effect="light"
            >视频提取文案</el-tag
          >
          <el-tag v-if="row.way == 12" type="danger" effect="light"
            >高级视频2生成</el-tag
          >
          <el-tag v-if="row.way == 13" type="danger" effect="light"
            >专业版声音克隆</el-tag
          >
          <el-tag v-if="row.way == 14" type="danger" effect="light"
            >专业版声音合成</el-tag
          >
          <el-tag v-if="row.way == 15" type="danger" effect="light"
            >ai标题生成</el-tag
          >
          <el-tag v-if="row.way == 16" type="danger" effect="light"
            >抖音视频扣点</el-tag
          >
          <el-tag v-if="row.way == 17" type="danger" effect="light"
            >快手视频扣点</el-tag
          >
          <el-tag v-if="row.way == 18" type="danger" effect="light"
            >视频号视频扣点</el-tag
          >
          <el-tag v-if="row.way == 19" type="danger" effect="light"
            >小红书视频扣点</el-tag
          >

              <el-tag v-if="row.way == 20" type="danger" effect="light"
            >获取抖音二维码</el-tag
          >
            <el-tag v-if="row.way == 21" type="danger" effect="light"
            >抖音授权</el-tag
          >
             <el-tag v-if="row.way == 22" type="danger" effect="light"
            >获取视频号二维码</el-tag
          >
              <el-tag v-if="row.way == 23" type="danger" effect="light"
            >视频号授权</el-tag
          >
             <el-tag v-if="row.way == 24" type="danger" effect="light"
            >获取小红薯二维码</el-tag
          >
             <el-tag v-if="row.way == 25" type="danger" effect="light"
            >小红薯授权</el-tag
          >
             <el-tag v-if="row.way == 26" type="danger" effect="light"
            >线路四合成</el-tag
          >
              <el-tag v-if="row.way == 27" type="danger" effect="light"
            >ip账号采集</el-tag
          >
              <el-tag v-if="row.way == 28" type="danger" effect="light"
            >主页视频分析</el-tag
          >
        </template>

        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-popconfirm
            class="ele-action"
            title="确定要删除此条记录吗？"
            @confirm="remove(row)"
          >
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>
    </el-card>
  </el-card>
</template>

<script>
import IndexData from '@/views/statis/components/index-data.vue';
import LogSearch from './account-log-search';
import { list, addLog, remove } from '@/api/account/log';

const DEFAULT_FORM = {
  account_id: 0,
  type: 1,
  point: ''
};

export default {
  name: 'AccountLog',
  components: { LogSearch, IndexData },
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: [],

    uid: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // 表格列配置
      columns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center',
          fixed: 'left'
        },
        {
          columnKey: 'index',
          type: 'index',
          width: 45,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },

        {
          prop: 'account',
          label: '账号',
          showOverflowTooltip: true,
          minWidth: 110,
          slot: 'account'
        },
        {
          prop: 'current',
          label: '当前点数',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'point',
          label: '操作点数',
          showOverflowTooltip: true,
          minWidth: 110,
          slot: 'point'
        },
        {
          prop: 'way',
          label: '方式',
          showOverflowTooltip: true,
          minWidth: 110,
          slot: 'way'
        },

        {
          prop: 'create_time',
          label: '操作时间',
          showOverflowTooltip: true,
          minWidth: 100
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 150,
          align: 'center',
          resizable: false,
          slot: 'action',
          hideInSetting: true,
          showOverflowTooltip: true
        }
      ],
      // 表单数据
      form: { ...DEFAULT_FORM },
      rules: {
        point: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入操作点数'
          }
        ]
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false
    };
  },
  methods: {
    /* 表格数据源 */
    datasource({ page, limit, where, order, filterValue }) {
      where.account_id = this.data.id;
      return list({
        ...where,
        ...order,
        ...filterValue,
        page,
        limit
      });
    },

    /* 刷新表格 */
    reload(where) {
      this.$refs.table.reload({ page: 1, where: where });
    },

    /* 保存编辑 */
    save() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return false;
        }
        this.loading = true;

        const data = {
          ...this.form,
          account_id: this.data.id
        };

        addLog(data)
          .then((msg) => {
            this.$message.success(msg);
            this.reload();
            this.loading = false;
          })
          .catch((e) => {
            this.$message.error(e.message);
            this.loading = false;
          });
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
    /* 删除 */
    remove(row) {
      const loading = this.$loading({ lock: true });
      remove(row.id)
        .then((msg) => {
          loading.close();
          this.$message.success(msg);
          this.reload();
        })
        .catch((e) => {
          loading.close();
          this.$message.error(e.message);
        });
    }
  },
  watch: {
    uid() {
      this.reload();
    },
    visible(visible) {
      if (visible) {
        if (this.data) {
          this.form = { ...DEFAULT_FORM };
          this.$util.assignObject(this.form, this.data);
          this.isUpdate = true;
          this.form.account_id = this.data.id;
        } else {
          this.isUpdate = false;
        }
      } else {
        this.$refs['form'].clearValidate();
        this.form = { ...DEFAULT_FORM };
      }
    }
  }
};
</script>
